<template>
    <div>

        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/' }"><i class="el-icon-lx-cascades"></i> 首页</el-breadcrumb-item>
                <el-breadcrumb-item> 服务管理</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: '/service' }">服务管理</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="ServeManager">
            <!-- <h4>服务管理</h4> -->
            <el-button type="primary" @click="addServe">发布服务</el-button>
            <!-- 头部 -->
            <header>
                <el-form ref="form" label-position="left" :model="form" label-width="75px">

                    <el-row type="flex" justify="space-between">
                        <el-col :span="8">
                            <el-form-item label="服务项目:" prop="serviceitem">
                                <el-input v-model="form.serviceitem"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="服务分类:" prop="typeid">
                                <el-select v-model="form.typeid" placeholder="请选择">
                                    <el-option label="全部" value="0"></el-option>
                                    <el-option v-for="item in initTypes" :key="item.id" :label="item.typename"
                                        :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>

                        <el-col :span="8">
                            <el-form-item label="商家名称:" prop="name">
                                <el-input v-model="form.name"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row type="flex" align="bottom" :gutter="20">
                        <el-col :span="1.5">
                            <el-button type="primary" @click="select">筛选</el-button>
                        </el-col>
                        <el-col :span="1.5">
                            <el-button type="primary">导出</el-button>
                        </el-col>
                        <el-col :span="1.5">
                            <el-button type="text" size="mini" @click="resetForm">清空筛选条件</el-button>
                        </el-col>

                    </el-row>
                </el-form>
            </header>
            <!-- 表格 -->
            <el-table max-height="301" :data="tableData" border
                :header-cell-style="{ background: '#fff !important', fontWeight: 'normal', textAlign: 'center' }"
                :row-style="{ height: '65px' }" style="width: 100%;margin-top: 10px;">
                <el-table-column align="center" prop="id" label="服务编号">
                </el-table-column>
                <el-table-column align="center" prop="serviceitem" label="服务项目">
                </el-table-column>
                <el-table-column align="center" prop="name" label="商家名称">
                </el-table-column>
                <el-table-column align="center" prop="typename" label="服务分类">
                </el-table-column>
                <el-table-column align="center" prop="originalprice" label="原价(元)">
                </el-table-column>
                <el-table-column align="center" prop="presentprice" label="现价(元)">
                </el-table-column>
                <el-table-column align="center" prop="content" label="服务介绍">
                </el-table-column>
                <el-table-column align="center" prop="createdate" label="创建时间">
                </el-table-column>
                <el-table-column align="left" label="操作" width="180" fixed="right">
                    <template slot-scope="scope">
                        <el-button icon="el-icon-edit" type="primary" size="mini"
                            @click="handleEdit(scope.$index, scope.row)">修改</el-button>
                        <el-button icon="el-icon-delete" type="danger" size="mini"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页器 -->
            <div class="block" align="right">
                <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="query.pageNum" :page-sizes="[1, 2, 5, 10]" :page-size="query.pageSize"
                    layout="total, sizes, prev, pager, next, jumper" :total="pageTotal">
                </el-pagination>
            </div>




        </div>
    </div>
</template>

<script>
import { selectservices, delservice, selectservicetype } from '@/api/serveManager'
export default {
    components: { selectservices, delservice, selectservicetype },
    mounted() {
        this.getData()
        this.initType()
    },
    methods: {
        // 初始化表格数据和查询
        async getData() {
            let result = await selectservices(this.$qs.stringify(this.query))
            if (result.code == 200) {
                this.tableData = result.data.list
                this.pageTotal = result.data.total
            } else if (result.code == 400) {
                this.tableData = []
            }
        },
        // 删除数据
        async delData(ids) {
            let result = await delservice({ id: ids })

            if (result.code == 200) {
                this.$message({
                    message: '删除成功',
                    type: 'success'
                });
                this.query.pageNum = 1
                this.getData()
            }
        },
        // 渲染服务分类
        async initType() {
            let result = await selectservicetype()
            if (result.code == 200) {
                this.initTypes = result.data
            }
        },
        handleEdit(index, row) {
            console.log(index, row);
        },

        // 删除
        handleDelete(index, row) {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.delData(row.id)
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });

        },
        // 改变每页显示数据
        handleSizeChange(val) {
            // 回到第一页
            this.query.pageNum = 1
            this.query.pageSize = val
            this.getData();
        },
        // 点击不同页数
        handleCurrentChange(val) {
            this.query.pageNum = val
            this.getData();
        },
        // 筛选
        select() {
            this.query.name = this.form.name
            this.query.serviceitem = this.form.serviceitem
            this.query.typeid = this.form.typeid
            this.query.pageNum = 1
            this.getData();
            this.$message({
                message: '查询完成',
                type: 'success'
            });
        },
        // 清空筛选条件
        resetForm() {
            this.$refs.form.resetFields();
            this.select()
            return false;
        },
        addServe() {
            this.$router.push('addserve');
        }
    },
    data() {
        return {
            query: {
                pageNum: 1,   //当前第几页
                pageSize: 2,  //每页多少条数据
                typeid: 0,
                mid: '',
                name: '',
                serviceitem: ''
            },
            form: {
                serviceitem: '',
                name: '',
                typeid: "0"
            },
            tableData: [],
            initTypes: [],
            pageTotal: 0,
        };
    },
};
</script>

<style  scoped>
.ServeManager {
    border: 1px solid #ebeef5;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    height: 90%;
    padding: 20px;
    box-sizing: border-box;
    position: relative;
}

h4 {
    font-weight: 540;
}

header {
    background-color: #f5f5f5;
    padding: 20px;
    margin-top: 15px;
    box-sizing: border-box;
}
</style>
